<template>
  <div class="login">
    <el-row class="loginform">
      <el-col :span="20">
        <el-card class="content">
          <div style="padding: 14px;">
            <span class="title">WELCOME</span>
            <div class="bottom clearfix">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item label prop="checkname">
                  <el-input
                    type="primary"
                    v-model="ruleForm.checkname"
                    autocomplete="on"
                    placeholder="请输入账号"
                    status-icon="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label prop="checkpass">
                  <el-input
                    type="password"
                    v-model="ruleForm.checkpass"
                    autocomplete="off"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                    size="mini"
                    class="loginbtn"
                  >登 &nbsp;&nbsp;录</el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="checked">记住密码</el-checkbox>
                  <el-button type="text" class="button forget">忘记密码?</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    var checkusername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        if (this.ruleForm.username !== "") {
          this.$refs.ruleForm.validateField("checkusername");
        }
        callback();
      }
    };
    var checkpass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        if (this.ruleForm.pass !== "") {
          this.$refs.ruleForm.validateField("checkpass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        username: ""
      },
      rules: {
        checkname: [{ validator: checkusername, trigger: "blur" }],
        checkpass: [{ validator: checkpass, trigger: "blur" }]
      },
      currentDate: new Date(),
      checked: false
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.msg("登陆成功");
        } else {
          // console.log("error submit!!");
          this.msg("请输入");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    msg(msg) {
      this.$message({
        message: msg,
        center: true,
        type: "success",
        customClass: "msg",
        duration: 1000
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url("../assets/fonts/font.css");
* {
  padding: 0;
  margin: 0;
  font-family: "tarjan";
}
.loginbtn {
  width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.title {
  font-size: 30px;
  color: white;
  font-family: 'tarjan'; 
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.loginform {
  width: 400px;
  margin: 0 0 0 60%;
  position: relative;
  top: 25%;
}
.login {
  height: 729px;
  background: url("../assets/loginBackIMG2.png");
  background-size: 100%;
  background-position: 0;
  background-repeat: no-repeat;
}
.el-form-item__label {
  text-align: center !important;
}
.el-card {
  border: none;
  background: rgba(0, 0, 0, 0.4) !important;
  border: none !important;
}
.el-form-item__error {
  color: azure !important;
}
.msg {
  width: 150px !important;
}
.el-message {
  min-width: 150px !important;
}
.remenber {
  float: left;
}
input{
  border: none !important;
}
.el-input__suffix i{
  color: #999 !important;
}
.el-checkbox {
  margin-right: 106px !important;
}
</style>
